<section style="min-width: 230px ; max-width: 550px;margin:30% auto;">
<section class="todoapp"
         ng-app="todosApp" ng-controller="todosController">
    <header class="header">
        <h1>todos</h1>
        <form ng-submit="add()">
            <input ng-model="newTodo" class="new-todo" placeholder="What needs to be done?" autofocus>
        </form>
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
        <input
                ng-change="toggleAll()"
                ng-model="selectAll" class="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <!-- These are here just to show the structure of the list items -->
            <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
            <li
                    ng-class="{editing:isEditingId == item.id,completed:item.completed}"
                    ng-repeat="item in todos | filter : isCompleted  track by $index">
                <div class="view" >
                    <input
                            ng-change="statusChange()"
                            ng-model="item.completed" class="toggle" type="checkbox">
                    <label ng-dblclick="edit(item.id)">{{item.name}}</label>
                    <button ng-click="remove(item.id)" class="destroy"></button>
                </div>
                <form ng-submit="save()">
                    <input class="edit" ng-model="item.name">
                </form>
            </li>
        </ul>
    </section>
    <!-- This footer should hidden by default and shown when there are todos -->
    <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count"><strong>{{getActive()}}</strong> item left</span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
            <li>
                <a ng-class="{selected:isCompleted.completed==undefined}"  ng-click="all()" href="#/">All</a>
            </li>
            <li>
                <a ng-class="{selected:isCompleted.completed==false}" href="#/active" ng-click="active()">Active</a>
            </li>
            <li>
                <a ng-class="{selected:isCompleted.completed==true}" href="#/completed" ng-click="completed()">Completed</a>
            </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button ng-click="clearAll()" class="clear-completed">Clear completed</button>
    </footer>
</section>
<footer class="info">
    <p>Double-click to edit a todo</p>
    <!-- Remove the below line ↓ -->
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <!-- Change this out with your name and url ↓ -->
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>


</section>
